<template>
  <div class="select-tree-component">
    <FormItemView :selecting="selecting" :value="value" @click="handleOpen" />
    <output-template-input ref="OutputTemplateInputRef" @close="selecting = false" />
  </div>
</template>

<script>
import OutputTemplateInput from './template'
import FormItemView from '@/components/FormItemView/index'
export default {
  name: 'OutputTemplateView',
  components: { OutputTemplateInput, FormItemView },
  props: {
    value: {
      type: String,
      default: () => ''
    },
    optionList: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: () => '请选择'
    },
    title: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      selecting: false
    }
  },
  methods: {
    handleOpen() {
      this.$data.selecting = true
      this.$refs.OutputTemplateInputRef.open(this.$props.value).then(res => {
        this.$emit('input', res)
        this.$emit('change', res)
      }).finally(() => {
        this.$data.selecting = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .select-block {
    line-height: 28px;
    min-height: 28px;

    cursor: pointer;
    position: relative;

    // 右侧下拉图标
    .icon-select {
      position: absolute;
      right: 0;
      top: 0;
      width: 28px;
      color: #DCDFE6;
      text-align: center;
      transition: 0.3s transform;
      transform: rotateZ(180deg);

      &.open {
        transform: rotateZ(0deg);
      }
    }
  }
</style>
